<template>
	<!-- <view :style="[boxStyle]"> -->
	
	<view style="padding-top: 24rpx;">
		
		
		
		<view class="wf-page">
			<view>
				<view id="left" v-if="leftList.length">
					<view v-for="(item,index) in leftList" :key="index" class="wf-item" @tap="goDetail(item)">
						<view class='pictrue'>
							<easy-loadimage mode="widthFix" :image-src="item.image"
								:borderSrc="item.activity_frame.image" width="100%" height="370rpx"
								:borderRadius="imgStyle"></easy-loadimage>
						</view>
						<view class="info_box" :style="[bgRadius2]">
							<view class="w-full line1 fs-28 text--w111-333 lh-40rpx" v-if="checkboxInfo.includes(0)"
								:style="[productStyle]">
								{{item.store_name}}
							</view>

							<view class="price_info">
								<view class="price">
									<text class="unit">￥</text>
									<text class="value">{{item.price}}</text>
								</view>
								<view class="original_price">
									<text class="unit">￥</text>
									<text class="value">{{item.ot_price}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- right -->
			<view>
				<view id="right" v-if="rightList.length">
					<view v-for="(item,index) in rightList" :key="index" class="wf-item" @tap="goDetail(item)">
						<view class='pictrue'>
							<easy-loadimage mode="widthFix" :image-src="item.image"
								:borderSrc="item.activity_frame.image" width="100%" height="370rpx"
								:borderRadius="imgStyle"></easy-loadimage>
						</view>
						<view class="info_box" :style="[bgRadius2]">
							<view class="w-full line1 fs-28 text--w111-333 lh-40rpx" v-if="checkboxInfo.includes(0)"
								:style="[productStyle]">
								{{item.store_name}}
							</view>
							<view class="price_info">
								<view class="price">
									<text class="unit">￥</text>
									<text class="value">{{item.price}}</text>
								</view>
								<view class="original_price">
									<text class="unit">￥</text>
									<text class="value">{{item.ot_price}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<productWindow :attr="attr" :isShow='1' :iSplus='1' :iScart='1' :fangda="false" type="2" @myevent="onMyEvent"
			@ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNumDuo" @attrVal="attrVal" @iptCartNum="iptCartNum"
			@goCat="goCatNum" id='product-window' :is_vip="is_vip"></productWindow>
	</view>
</template>

<script>
	import {
		getProductslist,
		getAttr
	} from '@/api/store.js';
	import skuSelect from '@/mixins/skuSelect.js'
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import {
		getCartCounts
	} from '@/api/order.js';
	import {
		goShopDetail
	} from '@/libs/order.js';
	import productWindow from '@/components/productWindow';
	export default {
		name: 'goodList',
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			},
			isSortType: {
				type: String | Number,
				default: 0
			},
			keywords: {
				type: String | Number,
				default: ""
			}
		},
		components: {
			productWindow
		},
		mixins: [skuSelect],
		data() {
			return {
				tempArr: [],
				type: 0,
				attr: {
					cartAttr: false,
					productAttr: [],
					productSelect: {}
				},
				id: 0,
				productValue: [],
				attrValue: '', //已选属性
				storeName: '', //多属性产品名称
				is_vip: 0, //是否是会员
				storeInfo: {},
				allList: [], // 全部列表
				leftList: [], // 左边列表
				rightList: [], // 右边列表
				mark: 0, // 列表标记
				boxHeight: [], // 下标0和1分别为左列和右列高度
			};
		},
		watch: {
			keywords() {
				this.productslist();
			},
			// 监听列表数据变化
			tempArr: {
				handler(nVal, oVal) {
					// 如果数据为空或新的列表数据少于旧的列表数据（通常为下拉刷新或切换排序或使用筛选器），初始化变量
					if (!this.tempArr.length ||
						(this.tempArr.length === this.updateNum && this.tempArr.length <= this.allList.length)) {
						this.allList = [];
						this.leftList = [];
						this.rightList = [];
						this.boxHeight = [];
						this.mark = 0;
					}
					// 如果列表有值，调用waterfall方法

					if (this.tempArr.length) {
						this.allList = this.tempArr;
						this.leftList = [];
						this.rightList = [];
						this.boxHeight = [];
						this.allList.forEach((v, i) => {
							if (this.allList.length < 3 || (this.allList.length <= 7 && this.allList.length - i >
									1) || (this.allList.length > 7 && this.allList.length - i > 2)) {
								if (i % 2) {
									this.rightList.push(v);
								} else {
									this.leftList.push(v);
								}
							}
						});
						if (this.allList.length < 3) {
							this.mark = this.allList.length + 1;
						} else if (this.allList.length <= 7) {
							this.mark = this.allList.length - 1;
						} else {
							this.mark = this.allList.length - 2;
						}
						if (this.mark < this.allList.length) {
							this.waterFall()
						}
					}
				},
				immediate: true,
				deep: true
			},
			// 监听标记，当标记发生变化，则执行下一个item排序
			mark() {
				const len = this.allList.length;
				if (this.mark < len && this.mark !== 0 && this.boxHeight.length) {
					this.waterFall();
				}
			},
			dataConfig() {
				this.productslist();
			}
		},
		computed: {
			...mapState({
				cartNum: state => state.indexData.cartNum
			}),
			...mapGetters(['isLogin', 'uid', 'cartNum']),
			/*外层盒子样式*/
			boxStyle() {
				// let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
				// if (this.dataConfig.fillet.type) {
				//   borderRadius =
				//       `${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx`;
				// }
				return {
					// borderRadius,
					padding: `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
					marginTop: `${this.dataConfig.mbConfig.val * 2}rpx`,
					background: this.dataConfig.bottomBgColor.color[0].item,
				}
			},
			bgRadius() {
				let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
				if (this.dataConfig.fillet.type) {
					borderRadius =
						`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
				}
				return {
					borderRadius: borderRadius
				}
			},
			bgRadius2() {
				let borderRadius = `0 0 ${this.dataConfig.fillet.val * 2}rpx ${this.dataConfig.fillet.val * 2}rpx`;
				if (this.dataConfig.fillet.type) {
					borderRadius =
						`0 0 ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
				}
				return {
					borderRadius: borderRadius
				}
			},
			styleConfig() {
				return this.dataConfig.styleConfig.tabVal
			},
			/*商品图片圆角样式*/
			imgStyle() {
				let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
				if (this.dataConfig.styleConfig.tabVal == 1) {
					borderRadius = `${this.dataConfig.filletImg.val * 2}rpx ${this.dataConfig.filletImg.val * 2}rpx 0 0`;
				}
				if (this.dataConfig.filletImg.type) {
					borderRadius =
						`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${this.dataConfig.filletImg.valList[2].val * 2}rpx`;
					if (this.dataConfig.styleConfig.tabVal == 1) {
						borderRadius =
							`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx 0 0`;
					}
				}
				let imgRadius = `${this.dataConfig.fillet.val * 2}rpx ${this.dataConfig.fillet.val * 2}rpx 0 0`;
				if (this.dataConfig.fillet.type) {
					imgRadius =
						`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx 0 0`;
				}
				return this.dataConfig.name == 'promotionList' ? imgRadius : borderRadius
			},
			/*商品名称样式*/
			productStyle() {
				return {
					color: this.dataConfig.goodsNameColor.color[0].item,
					fontWeight: this.dataConfig.goodsName.tabVal ? 'normal' : 'bold'
				}
			},
			/* 展示信息 */
			checkboxInfo() {
				return this.dataConfig.checkboxInfo.type
			},
			/* 价格颜色 */
			priceColor() {
				return this.dataConfig.toneConfig.tabVal ? this.dataConfig.goodsPriceColor.color[0].item :
					'var(--view-theme)'
			},
			/* 原价颜色 */
			otPriceColor() {
				return this.dataConfig.goodsPriceColor.color[0].item
			},
			btnStyle() {
				return this.dataConfig.bntStyleConfig.tabVal
			},
			showBtn() {
				return this.dataConfig.cartConfig.tabVal
			},
			/* 按钮颜色 */
			btnBgColor() {
				console.log('sdf', this.dataConfig)
				return {
					background: this.dataConfig.toneConfig.tabVal ?
						`linear-gradient(90deg,${this.dataConfig.bntBgColor.color[0].item} 0%,${this.dataConfig.bntBgColor.color[1].item} 100%)` :
						'linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%)'
				}
			},
			btnTextColor() {
				return {
					color: this.dataConfig.toneConfig.tabVal ? this.dataConfig.bntBgColor.color[0].item : '#FFFFFF',
					background: this.dataConfig.toneCartConfig.tabVal ?
						`linear-gradient(90deg, ${this.dataConfig.bntBgColor.color[0].item} 0%, ${this.dataConfig.bntBgColor.color[1].item} 100%)` :
						'linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%)',
				}
			},
			/*商品数量*/
			numberConfig() {
				return this.dataConfig.numberConfig.val
			},
			/*商品模板*/
			goodStyleConfig() {
				return this.dataConfig.styleConfig.tabVal
			},
			/*检索条件  0综合 1销量 2价格*/
			goodsSort() {
				return this.dataConfig.goodsSort.tabVal
			},
			/*按照什么方式选择商品 0 指定商品 1 指定品牌 2指定分类 3 商品标签 */
			typeConfig() {
				return this.dataConfig.typeConfig.activeValue
			},
			bntConfig() {
				return this.dataConfig.bntConfig.tabVal
			},
			onlyShowPrice() {
				if (this.checkboxInfo.toString() == '0,2' || this.checkboxInfo.toString() == '2,0' || this.checkboxInfo
					.toString() == '2') {
					return true
				} else {
					return false
				}
			}
		},
		created() {
			// #ifndef APP-PLUS
			// this.$eventHub.$on('product_video_observe', () => {
			// 	this.observeVideo();
			// });
			// #endif
		},
		mounted() {
			this.productslist();
		},
		methods: {
			observeVideo() {
				let observer = uni.createIntersectionObserver(this, {
					observeAll: true
				});
				observer.relativeToViewport().observe('.video', res => {
					if (res.intersectionRatio) {
						uni.createVideoContext(res.id, this).play();
					} else {
						uni.createVideoContext(res.id, this).pause();
					}
				});
			},
			productslist() {
				let limit = this.$config.LIMIT;
				let data = {};
				if (this.typeConfig == 1) {
					data = {
						ids: this.dataConfig.goodsList.ids.join(','),
						keyword: this.keywords
					};
				} else {
					data = {
						priceOrder: this.goodsSort == 2 ? 'desc' : '',
						salesOrder: this.goodsSort == 1 ? 'desc' : '',
						brand_id: this.typeConfig == 2 ? this.dataConfig.brandList.brandVal.join(',') : '',
						store_label_id: this.typeConfig == 4 ? this.dataConfig.goodsLabel.activeValue.join(',') : '',
						cate_id: this.typeConfig == 3 ? this.dataConfig.classList.classVal.join(',') : '',
						limit: this.numberConfig,
						keyword: this.keywords
					};
				}
				getProductslist(data).then(res => {
					console.log(data)
					this.tempArr = res.data;
				});
			},
			goDetail(item) {
				goShopDetail(item, this.$store.state.app.uid).catch(res => {
					uni.navigateTo({
						url: `/pages/goods_details/index?id=${item.id}`
					});
				});
			},
			// 商品详情接口；
			getAttrs(id) {
				let that = this;
				getAttr(id, 0).then(res => {
					that.$set(that.attr, 'productAttr', res.data.productAttr);
					that.$set(that, 'productValue', res.data.productValue);
					that.$set(that, 'is_vip', res.data.storeInfo.is_vip);
					that.$set(that, 'storeInfo', res.data.storeInfo);
					that.DefaultSelect();
				})
			},
			addCartChange(item, index) {
				if (this.bntConfig == 1) {
					if (item.spec_type) {
						this.goCartDuo(item);
					} else {
						this.goCartDan(item, index);
					}
				} else {
					this.goDetail(item);
				}

			},
			getCartNum() {
				let that = this;
				getCartCounts().then(res => {
					this.$store.commit('indexData/setCartNum', res.data.count)
				});
			},
			// 瀑布流排序
			waterFall() {
				const i = this.mark;
				if (i == 0) {
					// 初始化，从左边开始插入
					this.leftList.push(this.allList[i]);
					// 更新左边列表高度
					this.getViewHeight(0);
				} else if (i == 1) {
					// 第二个item插入，默认为右边插入
					this.rightList.push(this.allList[i]);
					// 更新右边列表高度
					this.getViewHeight(1);
				} else {
					// 根据左右列表高度判断下一个item应该插入哪边
					if (!this.boxHeight.length) {
						this.rightList.length < this.leftList.length ?
							this.rightList.push(this.allList[i]) :
							this.leftList.push(this.allList[i]);
					} else {
						const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
						if (leftOrRight) {
							this.rightList.push(this.allList[i])
						} else {
							this.leftList.push(this.allList[i])
						}
					}
					// 更新插入列表高度
					this.getViewHeight();
				}
			},
			// 获取列表高度
			getViewHeight() {
				// 使用nextTick，确保页面更新结束后，再请求高度
				this.$nextTick(() => {
					setTimeout(() => {
						uni.createSelectorQuery().in(this).select('#right').boundingClientRect(res => {
							res ? this.boxHeight[1] = res.height : '';
							uni.createSelectorQuery().in(this).select('#left').boundingClientRect(
								res => {
									res ? this.boxHeight[0] = res.height : '';
									this.mark = this.mark + 1;
								}).exec();
						}).exec();
					}, 100)
				})
			},
		}
	};
</script>

<style lang="scss">
	$page-padding: 32rpx;
	$grid-gap: 10px;

	.wf-page {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20rpx;
	}

	.wf-item {
		width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);
		padding-bottom: 20rpx;
	}

	.wf-page1 .wf-item {
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding-bottom: 0;
	}

	.item~.item {
		margin-top: 32rpx;
	}

	.info_box {
		padding: 16rpx 20rpx;
		border-radius: 0 0 20rpx 20rpx;
		background-color: #fff;

		// .price {
		// 	color: #FF5D41;
		// 	font-weight: bold;
		// 	display: flex;
		// 	align-items: baseline;

		// 	.unit {
		// 		font-size: 24rpx;
		// 	}

		// 	.value {
		// 		font-size: 36rpx;
		// 	}
		// }

		// .original_price {
		// 	color: #777777;
		// 	font-weight: bold;
		// 	text-decoration: line-through;
		// 	display: flex;
		// 	align-items: baseline;


		// 	.unit {
		// 		font-size: 20rpx;
		// 	}

		// 	.value {
		// 		font-size: 28rpx;
		// 	}
		// }
	}

	.bg--w111-484643 {
		background: linear-gradient(90deg, #484643 0%, #1F1B17 100%);
	}

	.text--w111-FDDAA4 {
		color: #FDDAA4;
	}

	.svip_rd {
		border-radius: 14rpx 0 8rpx 14rpx;
	}

	.cart-btn {
		// background:rgba(255,255,255,0.9);
		width: 100%;
		height: 100%;
	}
</style>